<!-- 账号列表 -->
<template>
  <div class="system-user-box">
    <div class="header">
      <router-link to="/dashboard/system/user/add"><el-button size="small" type="primary">添加管理员</el-button></router-link>
    </div>
    <!-- 用户列表内容 -->
    <div class="content">
      <div class="body">
        <el-tabs v-model="getPager.currentStatus" @tab-click="changeStatus">
          <el-tab-pane :label="v.name" :name="v.status" v-for="(v) in getStatusPanel" :key="v.status">
            <UserList :status="v.status" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="getPager.total"
      @current-change="changepage"
    ></el-pagination>
  </div>
</template>

<script>
import UserList from "@/components/userlist";

// 导入混入对象（可以包含组件中声明的各个参数项）
import systemUser from '@/mixins/systemUser'
export default {
  mixins:[systemUser],
  components: {
    UserList
  },
  data() {
    return {
    };
  },
  created() {
    this.load() // 首次加载数据
  },
  methods: {  
    changeStatus() {
      this.setPager({currentPage:1})
      if (this.getPager.prevStatus == this.getPager.currentStatus) return;
      this.load(); //加载数据

    },
    changepage(page) {
      //点击分页
      // console.log(page);
      this.setPager({currentPage : page});
      this.load(); //分页加载数据
    }
  }
};
</script>

<style scoped lang="less">
.system-user-box {
  background: #fff;
  border-radius: 2px;
  .header {
    border-bottom: 1px solid #f6f6f6;
    button {
      margin: 20px 0px 10px 15px;
    }
  }
  .content {
    padding: 0 20px;
    .body {
      margin: 8px 0;
    }
  }
  .el-pagination {
    padding: 20px 0px 25px 15px;
    // text-align: center;
  }
 
}
</style>

